<template>
    <div class="album-built">
        <nav-header>
            <template slot="menuBefore">
                <li><router-link to="/life/alumni/album-list" tag="a">相册管理</router-link></li>
                <li class="gap">&gt;</li>
            </template>
            <li v-if="this.$route.params.id">新建相册</li>
        </nav-header>
        <div class="zh-table" v-loading="loading.status" :element-loading-text="loading.txt">
            <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm demo-form-inline">
                <el-form-item label="相册名称" prop="name">
                    <el-input style="width:640px;" placeholder="请输入相册名称" :disabled="disabled" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <!-- <el-form-item v-if="!uploadClicked">
                    <el-button type="primary" @click="submitForm('ruleForm')">开始上传</el-button>
                </el-form-item> -->
                <!-- <el-form-item v-if="uploadClicked">
                    <el-button type="primary" @click="cancelUploading">取消上传</el-button>
                </el-form-item> -->
                <el-form-item class="add-img pointer" v-if="fileList.length<20 && !uploadClicked">
                    <el-button type="warning" @click="">添加图片</el-button>
                    <input type="file" title="" accept="image/jpeg,image/png" @change="setUploadFile" multiple="multiple" class="upload pointer">
                </el-form-item>
                <div class="upload">
                    <ul class="clear" v-if="fileList!=0">
                        <li v-for="(item,key) in fileList" :key="key" class="fl">
                            <img :src="uploadFilesSrc[key]" alt="上传的图片" />
                            <img v-if="coverIdx==key" src="../../../../static/image/life/alumni/cover.png" alt="封面图标" class="coverImg" />
                            <div class="cover">
                                <p class="setCover pointer" @click="setCoverImg(key)">设为封面</p>
                                <img @click="deleteImg(key)" src="../../../../static/image/life/alumni/delete.png" alt="删除按钮小图标" class="close pointer" />
                            </div>
                            <div class="uploadCover" v-if="uploadClicked">
                                <div v-if="uploadProgressArr[key]>0" class="clear">
                                    <span class="fl"><i class="fl" :style="{width:uploadProgressArr[key]+'%'}"></i></span>
                                    <span class="fr">{{uploadProgressArr[key]}}%</span>
                                </div>
                                <div v-if="!uploadProgressArr[key]" v-loading="true" element-loading-text="等待上传" element-loading-spinner="el-icon-loading" class="waiting" style="background:transparent;"></div>
                            </div>
                        </li>
                    </ul>
                    <div class="empty" v-if="fileList==0">最多添加20张相片哦~</div>
                </div>
                <el-form-item label=" ">
                    <el-button :disabled="uploadClicked" type="primary" @click="submitForm('ruleForm')">开始上传</el-button>
                    <el-button @click="cancelUploading">取消</el-button>
                    <!-- <el-button>取消</el-button> -->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            // 加载数据时显示的信息和加载动画
            loading:{
                status:false,
                txt:'获取数据...',
            },
            keyword:'',
            ruleForm: {
                name:''    // 新建相册名字
            },
            rules: {
                name: [
                    { required: true, message: '请输入相册名称', trigger: 'blur' },
                    { max: 30, message: '最多输入30个字符', trigger: 'blur' }
                ],
            },
            disabled:false,      // 当点击开始上传时值为true，禁止修改名称
            uploadClicked:false,    // 当点击开始上传时，此值改为true;
            coverIdx:0,     // 设为封面的数组id，若不设置默认第一张为封面 
            uploadClicked:false,    // 当点解开始上传时，此值改为true;
            fileList:[],     // 用于存放上传图片的数组
            uploadFilesSrc:[],     // 存放已选上传图片的base64格式的URL 
            uploadCompleteURL:[],     // 存放上传成功后返回的后台地址
            uploadProgressArr:[],     // 开始上传时用于存放上传进度的百分比
            headers:{     // 请求头信息
                Authorization:`Bearer ${sessionStorage.getItem('token')}`,
                DecisionPlatform: sessionStorage.getItem('decisionPlatform'),
                token:sessionStorage.getItem('token') == '--' ? null : sessionStorage.getItem('token')
            }
        }
    },
    methods:{
        // 设置封面图片
        setCoverImg(idx){
            this.coverIdx = idx;
        },
        // 删除已选中图片
        deleteImg(idx){
            this.fileList.splice(idx,1);
            this.uploadFilesSrc.splice(idx,1);

            // 如果删除图片为封面图片则重置封面图片
            if(this.coverIdx==idx){
                this.coverIdx = 0;
            }else if(this.coverIdx>idx){
                this.coverIdx -=1 
            }
        },
        // 对选择上传图片的操作方法
        setUploadFile(){
            // 获取上传的DOM节点
            var upload = document.querySelector('.upload');

            // 获取选择上传文件信息数组
            var uploadArr = Array.from(upload.files);

            // 项目要求只能上传image/jpeg、image/bmp和image/png,去除这三种格式意外的文件
            // 声明一个变量用于存放根式不符合的文件数量
            var formatError = 0;    

            // 声明一个变量用于存放符合要求的文件数组
            var fileArr = uploadArr.filter(item=>{
                if(item.type=='image/jpeg' || item.type=='image/png' || item.type=='image/bmp'){
                    return item
                }else{
                    formatError++
                }
            })

            // 如果存在不符合格式的文件则报错
            if(formatError>0){
                this.$message({
                    showClose: true,
                    message: `一共有个${formatError}文件格式不符,已经自动过滤`,
                    type: 'error'
                });
            }

            var sum = this.fileList.length + fileArr.length;

            if(sum>20){
                this.$message({
                    showClose: true,
                    message: '最多只能上传20张图片',
                    type: 'error'
                });

            }else{
                this.fileList = [...this.fileList,...fileArr]

                // 获取到最新已选图片后重置uploadFilesSrc并存入最新的base64格式URL
                this.uploadFilesSrc = [];
                this.fileList.forEach(item=>{
                    this.getImgURL(item);
                })
            }

        },
        // 上传请求 （可以在这里或则getImgURL进行图片压缩的操作）
        uploading(){
            // 如果没有上传的文件和没有名字则无任何操作并提醒
            if(this.fileList==0){
                this.$message({
                    showClose: true,
                    message: '请选择上传图片',
                    type: 'error'
                });
                return
            }

            // 隐藏添加图片按钮
            this.uploadClicked = true;

            // 禁止修改相片名称
            this.disabled = true;

            // 以下一行代码在同时发送上传请求时才有用
            // this.uploadProgressArr = this.fileList.map(function(){return 0});
            // 检测之前有没有经上传好的图片，若没有则新建一个跟uploadProgressArr长度一样的空数组
            if(this.uploadCompleteURL==0){
                this.uploadCompleteURL = this.fileList.map(function(){return ''});
            }
            // 若已经存在上传完的图片，则在保留已上传的图片基础上增加新的空元素，使数组长度跟uploadProgressArr长度一直
            else{
                var emptyArr = this.fileList.map(function(){return ''});
                this.uploadCompleteURL = [...this.uploadCompleteURL,...emptyArr].slice(0,this.fileList.length)
            }

            // 以下3行注释为同时发送上传请求的操作
            // this.fileList.forEach((item,idx)=>{
                // this.uploadProgress(item,idx)
            // })
            
            // 以下为逐张图片上传的操作,先从第一张没有上传完的图片开始，每当上传完一张出发下一张上传
            var idx = 'full';     // full 代表数组里没有空的元素（全部图片已上传）
            for(var i=0;i<this.uploadCompleteURL.length;i++){
                if(!this.uploadCompleteURL[i]){
                    idx = i;
                    break;
                }
            }

            if(idx=='full'){
                // 若全部图片已上传完则之间发起新建相册请求
                this.buildPhotograph();
            }else{

                this.uploadProgressArr = this.uploadCompleteURL.map(item=>{if(item){return 100}else{return 0}});

                this.uploadProgress(this.fileList[idx],idx)
            }

        },
        // 取消上传请求
        cancelUploading(){
            if(!this.uploadClicked) return

            if(this.source){
                this.source.cancel('Operation canceled by the user.');
            }
            //             this.uploadFilesSrc,
            //             this.uploadCompleteURL,
            //             this.uploadProgressArr)

            // 遍历已经上传的图片数组，获取到第一个空值的索引值
            for(var i=0;i<this.uploadCompleteURL.length;i++){
                if(!this.uploadCompleteURL[i]){
                    var idx = i;
                    break;
                }
            }

            // 允许修改相片名称
            this.disabled = false;

            // 把还没有上传完的图片删掉
            this.fileList = this.fileList.slice(0,idx);
            this.uploadFilesSrc = this.uploadFilesSrc.slice(0,idx);
            this.uploadCompleteURL = this.uploadCompleteURL.slice(0,idx);
            this.uploadProgressArr = this.uploadProgressArr.slice(0,idx);
            

            this.uploadClicked = false;
        },
        // 上传的进度检测方法
        uploadProgress(blod,key){
            // 创建取消请求令牌
            var CancelToken = this.$ajax.CancelToken;
            this.source = CancelToken.source();

            var formdata = new FormData();

            formdata.append('file',blod);

            let success = res => {
                function getData(data){
                    return data.data ? getData(data.data) : data;
                }

                let data = getData(res);

                this.uploadProgressArr[key] = 100;
                this.uploadCompleteURL[key] = {pic: data.file_path, cover:0};
                
                // 以下三行为更新数据操作
                var finish = this.uploadProgressArr;
                this.uploadProgressArr = '';
                this.uploadProgressArr = finish;

                // 此为逐张图片上传的方法
                // 每次上传完都先检测是不是最后一张图片，若是自动发起新建相册请求，反则发起下一张图片的上传请求
                if(key==this.fileList.length-1){
                    this.buildPhotograph()
                }else{
                    this.uploadProgress(this.fileList[key+1],key+1)
                }

                // 以下为全部图片同时上传的方法
                // var arr = this.uploadCompleteURL
                // for(var i=0;i<arr.length;i++){
                //     if(!arr[i]){
                //         return
                //     }
                // }
                // // 如果uploadProgressArr所有元素都变为object则发送新建相册请求
                // this.buildPhotograph()
            }

            this.$ajax({
                url:'/api/resource/res_upload',
                method:'post',
                data:formdata,
                headers:{'content-type':'multipart/form-data'},
                cancelToken: this.source.token,
                onUploadProgress:progressEvent=>{ //原生获取上传进度的事件
                    if(progressEvent.lengthComputable){
                        //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
                        //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
                        var percent = parseInt(progressEvent.loaded/progressEvent.total*100);

                        this.uploadProgressArr[key] = percent>=100? 99 : percent;
                        // 以下三行为更新数据操作
                        var arr = this.uploadProgressArr;
                        this.uploadProgressArr = '';
                        this.uploadProgressArr = arr;

                    }
                },
                func: { success: success }
            })
            // 此为避免报错操作
            .catch(function (error) {});

        },
        // 发送新建相册请求
        buildPhotograph(){

            // 获取登录用户的id
            var id = this.$g.user_id;
            let success = res => {
                this.$message.success(res.msg);
                
                setTimeout(()=>{
                    this.$router.back();
                },1500)
            }

            // 等最后可以发送新建相册时再确定封面图片，避免上传中断后出现重选封面图片再上传的情况
            this.uploadCompleteURL[this.coverIdx].cover = 1

            this.$ajax({
                url:'/api/alumni/alumniPic',
                method:'post',
                data:{
                    name:this.ruleForm.name,     // 名
                    pic_arr:this.uploadCompleteURL,     // 图片，二维数组【【'pic'=>'/home/picture.jpg','cover' =>1】】（键名：pic:图片地址；cover 封面标志（0：否；1：是））
                    create_id:id     // 创建人id
                },
                func: { success: success }
            })

        },
        // 图片上传完之后点击确认或者关闭都返回上一级页面
        closeBuildPage(){
            this.$router.back()
        },
        // 不过上传图片格式转换为base64格式的方法（可以在这里或则uploading进行图片压缩的操作）
        getImgURL(file){
            var arr = this.uploadFilesSrc;

            var src;

            var reader = new FileReader();

            reader.addEventListener("load", function () {
                src = this.result;
                arr.push(src)
            }, false);

            reader.readAsDataURL(file);

        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                // 当检验通过时
                if (valid) {
                    // 触发开始上传请求
                    this.uploading()
                } else {
                    return false;
                }
            });
        },
    },
}
</script>


<style lang="scss">
    .album-built{
        .zh-table{
            .el-form{
                .add-img{
                    position:relative;

                    input{
                        position:absolute;
                        top:0;
                        left:0;
                        width:100%;
                        height:100%;
                        opacity:0;
                        z-index:10;
                    }
                }
                ul.clear{
                    // margin:53px 0 45px 41px;
                    min-height: 603px;
                    li{
                        position:relative;
                        margin:0 20px 18px 0;
                        width:360px;
                        height:240px;
                        overflow:hidden;
                        &:last-child{
                            padding-bottom: 20px;
                        }

                        &>img{
                            width:100%;
                            height:100%;
                            object-fit:cover;
                            &.coverImg{
                                position:absolute;
                                top:0;
                                left:0;
                                width:44px;
                                height:44px;
                            }
                        }
                        .cover{
                            display:none;
                            position:absolute;
                            top:0;
                            left:0;
                            width:100%;
                            height:100%;
                            background: rgba(0,0,0,0.5);
                            p{
                                margin:102px auto;
                                width:120px;
                                height:36px;
                                line-height:36px;
                                border-radius: 4px;
                                font-size: 14px;
                                color: #FFFFFF;
                                letter-spacing: 0;
                                text-align:center;
                                background: #348EFC;
                            }
                            .close{
                                position:absolute;
                                top:14px;
                                right:13px;
                                width:16px;
                                height:16px;
                            }
                        }
                        .uploadCover{
                            // pointer-events:none;
                            // display:none;
                            position:absolute;
                            top:0;
                            left:0;
                            width:100%;
                            height:100%;
                            background: rgba(0,0,0,0.5);
                            &>div.clear{
                                margin:111px auto 0;
                                padding:0 55px;
                                height:19px;
                                text-align:center;
                                &>span{
                                    &:first-child{
                                        margin-top:2px;
                                        width:200px;
                                        height:8px;
                                        text-align:left;
                                        background: #0B1136;
                                        i{
                                            height:8px;
                                            background: #33BBBB;
                                        }
                                    }
                                    &:last-child{
                                        font-size: 14px;
                                        color: #FFFFFF;
                                        letter-spacing: 0;
                                    }
                                }
                            }
                            .waiting{
                                height:100%;
                                .el-loading-mask{
                                    background: transparent;
                                    .el-loading-spinner{
                                        .el-icon-loading{
                                            font-size:22px;
                                            color:#fff;
                                        }
                                        .el-loading-text{
                                            margin-top:13px;
                                            font-size: 14px;
                                            color: #FFFFFF;
                                            letter-spacing: 0;
                                        }
                                    }
                                }
                            }
                        }
                        &:hover .cover{
                            display:block;
                        }
                    }
                }
                .empty{
                    box-sizing:border-box;
                    width:100%;
                    height:603px;
                    padding-top:386px;
                    background: url("../../../../static/image/image05.png") center 148px no-repeat;
                    font-size: 16px;
                    color: #A2B2BB;
                    text-align:center;
                    letter-spacing: 0;
                }
            }
        }
        .pointer{
            cursor:pointer;
        }
    }
</style>